// 导入模块
const gulp = require('gulp') // gulp模块用于创建任务的
const uglify = require('gulp-uglify') // 压缩JS并去掉注释和空格
const babel = require('gulp-babel') // 浏览器兼容问题es6转es5
const rev = require('gulp-rev') // 加随机名，内容修改就重新生成新的随机名
const revCollector = require('gulp-rev-collector') // 根据temp目录记录的规则，替换html路径
const clean = require('gulp-clean') // 清除目录文件
const minifyCSS = require('gulp-minify-css') // 压缩css并去掉注释和空格
const imagemin = require('gulp-imagemin') // 压缩图片
const htmlmin = require('gulp-htmlmin') // html压缩去空格





// 打包html任务
gulp.task('html', over => {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
    gulp
        .src(['temp/**/*.json', './src/*.html'])
        .pipe(revCollector())
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./dist/')) // 管道流入dist目录中

        over()

})


// 打包img任务（图片不用加随机名
gulp.task('imgs', over => {
    gulp
        .src('./src/imgs/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/imgs/'))

        setTimeout(() => {
            over()
        }, 3000);
})



// 打包css任务
gulp.task('css', over => {
    gulp.src('./src/css/*.css')
        .pipe(minifyCSS())
        .pipe(rev())
        .pipe(gulp.dest('./dist/css/'))

        // 每次打包都将js对应的随机名保存到json中
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css')) //  写入清单以build目录

        over()
})

// 清除目录
const fs = require('fs')
gulp.task('clean', over => {
    if(fs.existsSync('dist/')){
        gulp.src('dist/', {
            read: false
        })
        .pipe(clean())
    }
    // over()
    setTimeout(() => {  // clean里面代码是异步的
        over()
    }, 2000 );
})


// 打包js任务
// gulp.task('js', () => {
    gulp.task('js', over => {

    // 获取文件名
    gulp.src('./src/js/*.js')

        // 过滤数据
        .pipe(babel({
            "presets": ["env"]
        }))
        .pipe(uglify())
        .pipe(rev())
        // 写到dist目录
        .pipe(gulp.dest('./dist/js/'))

        // 每次打包都将js对应的随机名保存到json中
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/js')) //  写入清单以temp目录

        over()
})


// 批量打包
// gulp.task('build',()=>{
    gulp.task('build', gulp.series('clean', 'js', 'css', 'imgs', 'html', () => {
        // gulp clean/js/css/imgs/html  挨个走
        console.log('打包完成');
        
    }))



// 通过node搞web服务器开发时使用
const  { createProxyMiddleware } = require('http-proxy-middleware')
const server = require('browser-sync').create()
const watch = require('gulp-watch')
// const connect = require('gulp-connect')
gulp.task('serve',()=>{
    server.init({
        // server:'./src',
        server:{
            baseDir:'./src',
            middleware:[

                // 后期这个网站请求头只要是/api开头的都会被拦截
                // 由前端模块代理请求
                // 然后返回数据
                // 最终的请求地址是：target + $.get/post/ajax的url，多了api需要移除
                createProxyMiddleware('/api', { 
                    // 目标服务器网址
                    target: "http://kg.zhaodashen.cn/v1/",
                    changeOrigin: true, // 是否允许跨域
                    secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                    pathRewrite: {      // 重写路径请求
                        // 移除
                        // '^/remove/api' : ''
                        '^/api' : ''
                    },
                 })
            ]
        },
        port: 80
    })

    // 监控文件修改
    watch('src/*.html', function() {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/style/*.css', function() {
        console.log('你修改CSS文件了')
        server.reload()
    }) 
    watch('src/js/*.js', function() {
        console.log('你修改JS文件了')
        server.reload()
    })
})
